<template>
  <div id="temp">
    <mt-header fixed title="学习园地"></mt-header>
    <div class="col">
      <ul class="tabs">
        <li v-for="(list,index) in getList" @click="loadList(list.id,index)" :class="idx===index?'active':''" class="tab-link">
          {{list.title}}
        </li>
      </ul>
    </div>
    <yd-infinitescroll :callback="loadMore" ref="pullrefreshDemo" class="tab-body study-tab-body">
      <ul slot="list">
        <li class="set" v-for="(item, key) in list" :key="key" @click="link(item)">
          <img src="../../../statics/imgs/images/img.jpg"/>
          <div>
            <p>
              XXXX活动：活动标题活动标题活动标题
            </p>
            <em>
              07-13
            </em>
          </div>
        </li>
      </ul>
      <!-- 数据全部加载完毕显示 -->
      <span slot="doneTip">啦啦啦，啦啦啦，没有数据啦~~</span>
      <!-- 加载中提示，不指定，将显示默认加载中图标 -->
      <img slot="loadingTip" src="http://static.ydcss.com/uploads/ydui/loading/loading10.svg"/>
    </yd-infinitescroll>

  </div>
</template>
<script type="text/babel">
  import Vue from 'vue';
  import {PullRefresh} from 'vue-ydui/dist/lib.rem/pullrefresh';
  import {Confirm, Alert, Toast, Notify, Loading} from 'vue-ydui/dist/lib.rem/dialog';
  /* 使用px：import {PullRefresh} from 'vue-ydui/dist/lib.px/pullrefresh'; */

  Vue.component(PullRefresh.name, PullRefresh);
  export default {
    data() {
      return {
        getList: [
          {title: "全部", id: " ",isActive: "true"},
          {title: "党中央会议精神", id: "59f16e59e370ef14806264db",isActive: "false"},
          {title: "系列重要讲话", id: "59f16e59e370ef14806264dd",isActive: "false"},
          {title: "专题教育", id: "59f16e59e370ef14806264df",isActive: "false"},
          {title: "两学一做", id: "4",isActive: "false"},
          {title: "三会一课", id: "5",isActive: "false"},
          {title: "时政热点", id: "6",isActive: "false"},
          {title: "主流媒体评论", id: "7",isActive: "false"},
        ],
        idx:'0',
        page: 239,
        list: [],
      }
    },
    created() {
      var all =0;
      this.loadList(all);
    },
    methods: {
      //tab设置
      loadList(cateid,index) {
        // 0.0 如果方法的cateid参数没有传递，则默认是0,代表获取所有图片数据
        cateid = cateid || 0;
        index =index || 0;
        var that = this;
        let url = 'http://wxtest.centaline.com.cn/api/api?type=getimages&cateid='+cateid;
        this.$http.get(url).then(function (response) {
          that.list = response.body.message;
          console.log(that.list);
          that.page++;
        });
        this.idx = index;
      },
      link(item){
        console.log(item);
        this.$router.push({
          path:"/xxyd/studyInfo",
          query:{
            id:item.id
          }
        })
      },
      loadMore() {
        var that = this;
        let url = 'http://wxtest.centaline.com.cn/api/api?type=getcomments&artid=59f179e5e370ee17f05af22b&pageindex=' + this.page;
        this.$http.get(url).then(function (response) {
          if (response.body.message.length <= 0) {
            that.$dialog.toast({
              mes: '已是最新内容'
            });
            /* 所有数据加载完毕 */
            that.$refs.pullrefreshDemo.$emit('ydui.infinitescroll.loadedDone');
            return;
          }
          else {
            for (var i = 0; i < response.body.message.length; i++) {
              that.list.push(response.body.message[i])
            }
            that.$dialog.toast({
              mes: '为您更新了' + response.body.message.length
            });

            /* 单次请求数据完毕 */
            that.$refs.pullrefreshDemo.$emit('ydui.infinitescroll.finishLoad');
            that.page++;
          }
        });
      },
    }
  }
</script>
<style scoped lang="less">
  .tabs .active {
    height: 47px;
    border-bottom: .1rem solid #EC542E;
    color: #EC542E;
    transition: .3s;
  }

  .mint-header {
    height: .9rem;
    background-color: #4284D8;
    font-size: .35rem;
  }

  .col {
    /*width: 100%;*/
    margin-top: .9rem;
    height: .8rem;
    line-height: .8rem;
    background-color: #ffffff;
    overflow-x: scroll;
    ul {
      width: 150%;
      li {
        float: left;
        padding: 0 .1rem 0 .1rem;
        color: #808080;
        display: block;
        text-align: center;
      }
    }
  }

  .col::-webkit-scrollbar {
    display: none;
  }

  /*测试样式*/
  .comment {
    padding: 0 5px;
  }

  .comment h3, .list h3 {
    padding-bottom: 5px;
    border-bottom: 1px solid #ccc;
    margin-bottom: 15px;
    margin-top: 30px;
  }

  .title {
    background-color: #e5e5e5;
    padding: 10px;
  }

  .title span {
    font-size: 14px;
    color: #666;
  }

  .mint-button--primary {
    background-color: #ff6600;
  }

  ul {
    /*width: 100%;*/
    /*height: 100%;*/
    /*overflow-y: scroll;*/
    text-align: center;
  }
  .tab-body{
    margin-top: -2.3rem;
  }
</style>
